<template>
  <div class="w-full ">
    <!-- 搜索框 -->
    <div class="flex gap-4 mb-4">
      <el-button type="danger" size="large" @click="batchOffSale">批量下架</el-button>
      <el-select v-model="searchData.productStatus" size="large" style="width: 240px" suffix-icon="CaretBottom">
        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <div>
        <el-input v-model="searchData.productName" placeholder="请输入商品编码" size="large" style="width: 240px" />
        <el-button type="info" icon="Search" @click="search" size="large">搜索</el-button>
      </div>
    </div>
    <!-- 数据列表 -->
    <el-table ref="multipleTableRef" @selection-change="handleSelectionChange" :data="productDownloadList"
      header-row-class-name="orange-header" border style="margin: 20px 0;">
      <el-table-column type="selection" width="55" />
      <el-table-column label="商品信息">
        <template #default="scope">
          <img :src="scope.row.productImg" alt="" style="width: 50px;height: 50px;">
          <span>{{ scope.row.productName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="价格(元)">
        <template #default="scope">
          <p class="mt-1">发布价:￥<span class="text-red-800">{{ scope.row.publishPrice }}</span></p>
          <p class="mt-1"> 现价:￥<span class="text-red-800">{{ scope.row.nowPrice }}</span></p>
          <el-button link type="primary" @click="dialogVisible=!dialogVisible">修改价格</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="stock" label="收藏" sortable />
      <el-table-column prop="downNum" label="下载量" sortable />
      <el-table-column prop="createTime" label="创建时间" sortable />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="warning" @click="handleOffSale(scope.$index, scope.row)">下架</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="mt-8 flex justify-center">
      <el-pagination v-model:current-page="currentPage" :page-size="20" :total="pageTotal" prev-text="上一页"
        next-text="下一页" layout="prev, pager, next,total,jumper" @current-change="handleCurrentChange" />
    </div>
  </div>
  <!-- 修改价格的弹框 -->
  <el-dialog v-model="dialogVisible" title="修改价格" width="30%">
    <el-form :model="form" label-width="100px">
      <el-form-item label="发布价格">
        <el-input v-model="form.publishPrice" type="number" placeholder="请输入发布价格"></el-input>
      </el-form-item>
      <el-form-item label="现价">
        <el-input v-model="form.nowPrice" type="number" placeholder="请输入现价"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePrice">确 定</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script setup>
import { ref, reactive, onMounted, } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
//加载json模拟数据
import loadLocalJson from "@/https/local/localJson.js";
//获取下载的商品信息
const productDownloadList = ref()
const getOnSaleGoods = async () => {
  await loadLocalJson("json/shop/onSaleProducts.json").then((res) => {
    productDownloadList.value = res.data.list;
    pageTotal.value = res.data.total;
  });
}
//分页相关的数据
const currentPage = ref(1);
const pageTotal = ref(0);
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  //todo 做分页查询
};

const searchData = reactive({
  productStatus: null,
  productName: null
})
const statusOptions = [
  { value: '商品状态', label: '商品状态' },
  { value: '供货中', label: '供货中' },
  { value: '已下架', label: '已下架' },
  { value: '已删除', label: '已删除' },
]
//todo 点击搜索按钮
const search = () => {
  console.log("点击了搜索按钮", searchData)
}

const multipleTableRef = ref()
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

//批量删除
const batchOffSale = () => {
  //选择要删除的商品
  console.log(multipleSelection.value.map(item => item.id));
  if (multipleSelection.value.length === 0) {
    return ElMessage({
      type: 'warning',
      message: '请选择要下架的商品',
    })
  }
  //todo 批量删除调用后端接口删除数据
  ElMessageBox.confirm('确定要下架这些商品吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    //todo 删除成功
    ElMessage({
      type: 'success',
      message: '下架成功成功',
    })
    //刷新数据
    getOnSaleGoods()
  }).catch(() => { })
}

//todo  修改价格
const dialogVisible = ref(false)
const form = reactive({
  publishPrice: null,
  nowPrice: null,
})
const  updatePrice = () => {
 

}

//todo 编辑的操作 
const handleEdit = (row) => { 

}

//todo 下架的操作
const  handleOffSale = (row) => {
  ElMessageBox.confirm('确定要下架吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    //todo 下架成功
    ElMessage({
      type: 'success',
      message: '下架成功',
    })
    //刷新数据
  })
}


onMounted(async () => {
  await getOnSaleGoods()
})
</script>
<style lang="less" scoped></style>
<style>
/* 表格整体背景色 */
.el-table {
  /* background-color: #666 !important; */
  /* 浅黄色背景 */
}

/* 表头样式 */
.orange-header th {
  background-color: #eee !important;
  /* 橘色背景 */
  color: #777 !important;
  /*文字颜色*/
}

/* 可选：hover效果 */
.el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: #ffefd5 !important;
}
</style>